<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:fragment="content" id="divProductDetails">
      <th:block th:each="detail, status : ${product.details}">
        <div class="form-inline" th:id="'divDetail' + ${status.index}">
          <input type="hidden" name="detailIDs" th:value="${detail.id}" />
          <label class="m-3">Name:</label>
          <input
            type="text"
            class="form-control w-25"
            name="detailNames"
            maxlength="255"
            th:value="${detail.name}"
          />
          <label class="m-3">Value:</label>
          <input
            type="text"
            class="form-control w-25"
            name="detailValues"
            maxlength="255"
            th:value="${detail.value}"
          />
          <a
            name="linkRemoveDetail"
            class="btn-wise-static fas fa-times-circle fa-2x ml-2"
            title="Remove this detail"
          ></a>
        </div>
      </th:block>

      <div
        class="form-inline"
        th:id="'divDetail' + ${#lists.size(product.details)}"
      >
        <input type="hidden" name="detailIDs" value="0" />
        <label class="m-3">Name:</label>
        <input
          type="text"
          class="form-control w-25"
          name="detailNames"
          maxlength="255"
        />
        <label class="m-3">Value:</label>
        <input
          type="text"
          class="form-control w-25"
          name="detailValues"
          maxlength="255"
        />
      </div>
    </div>
  </body>
</html>
